<template>
  <div>
    <DocHeader :title="data.title" fromDoc="hospitalizationNotice" />
    <div class="docMain">
      （3）支付医疗费用及其他服务费用的义务<br />
      （4）尊重医务人员的劳动及人格尊严的义务<br />
      （5）遵守医院规章制度的义务<br />
      （6）不影响他人治疗，不将疾病传染给他人的义务<br />
      （7）爱护医院公共财物的义务
      <div class="title2">住院患者安全告知书</div>
      尊敬的患者：
      <div style="text-indent: 2em">
        欢迎您入住我院，您的安全是我们共同的心愿,我们为您提供以下几项安全措施，希望得到您的配合。
      </div>
      <span style="font-weight: bold">一、预防跌倒/坠床告知:</span><br />
      1.年老体弱、步态不稳或行动不便患者，下床活动请务必在陪护搀扶下行走，起床时请遵守“三部曲”:平躺30秒，坐起30秒，站立30秒，再行走。<br />
      2.穿着宽松、长度适宜的衣服及防滑鞋，湿性拖地后尽量避免走动。<br />
      3.若您在行走时出现头晕、双眼发黑等，立即原地蹲下或靠墙，请求帮助。<br />
      4.睡前减少饮水量并排空膀胱，便器、水杯、呼叫铃等放在伸手可及处，如需要协助，请使用呼叫铃。<br />
      5.睡觉时使用双侧护栏，陪伴者务必睡于病床一侧。<br />
      6.当您有服用降压、利尿、镇静或安眠剂等药物时，不可独自下床。<br />
      7.陪伴者注意事项: <br />
      （1）离开患者前，请主动告知医护人员。<br />
      （2）协助患者沐浴如厕时，将用物备齐，不可让患者独处，时间不宜过长。<br />
      （3）陪伴者换班时，需主动交接注意事项。遵守医院规章制度的义务。<br />
      （4）使用轮椅时，应先确认刹车已锁紧，脚踏板竖起，下坡时，轮椅应反向前进。<br />
      <span style="font-weight: bold">二、特别提醒: </span><br />
      1.住院患者禁止使用热水袋，严防烫伤。<br />
      2.输液、输氧、监护等过程中，不得擅自调动仪器，以免发生意外。<br />
      3.除非就医，不得将儿童带到医院，以免发生意外。<br />
      4.发生停电时，请原地等候，我们会与有关部门联系，设法尽快供电。<br />
      5.严禁吸烟，严禁使用大功率电器等违反消防安全的各种行为。<br />
      6.如遇火警，请勿慌张，听从医务人员指挥，切勿乘坐电梯。
      <!-- <div class="title2">住院患者离院告知书</div>
      尊敬的患者、家属或患者的法定监护人，授权委托人:
      <div style="text-indent: 2em">
        您好!医院是诊治疾病的场所，为了患者能安心治疗，早日恢复健康，住院期间不得请假。如果离院外出，可能发生以下风险，对患者治疗的进程、身体的健康甚至
        生命造成不利影响，特告知如下:
      </div>
      1、外出期间患者可能出现病情加重或病情恶化的不良后果。 -->
      <div class="flexBox">
        <div class="item">患者（家属）签名：</div>
        <div class="item">与患者的关系：</div>
      </div>
      <div class="flexBox">
        <div class="item">
          护士签名：
          <img
            v-if="signPhoto(sign, 'nursingDocument', data.type)"
            :src="
              'data:image/png;base64,' +
              signPhoto(sign, 'nursingDocument', data.type)
            "
            alt=""
            style="display: block; max-width: 98%; height: 24px"
            @click="handleSignImgClear"
          />
          <el-input
            v-else
            v-model="sign"
            style="width: 100px"
            @blur="handleSignInputBlur"
          ></el-input>
        </div>
        <div class="item">
          告知时间：
          <DateSelection
            v-model="time"
            value-format="yyyy-MM-dd HH:mm"
            :simple-op="true"
            :date-picker-show="true"
            :date-show="true"
            :no-clear="true"
            :hasBorder="false"
            :needTimeIcon="false"
            :display-num="!time"
            style="padding: 0"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash-unified'
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  toRefs,
  watch
} from 'vue'

import DateSelection from '@/components/DateSelection/indexV2.vue'
import { useSign } from '@/hooks'
import { getStoreFromInstance } from '@/utils/instance'

import DocHeader from '../DocHeader.vue'
import { baseData } from './baseData.js'

export default defineComponent({
  components: {
    DocHeader,
    DateSelection
  },
  props: {
    patCur: {
      type: Object,
      default: () => ({})
    },
    data: {
      type: Object,
      default: () => ({})
    },
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const state = reactive({
      hospitalName: window.hospitalName,
      pageData: cloneDeep(baseData),
      sign: '',
      time: +new Date()
    })
    const store = getStoreFromInstance()

    const { signPhoto, queryUserSignByName } = useSign()

    const user = computed(() => store.getters.user)

    function handleSignInputBlur() {
      queryUserSignByName([state.sign], 'nursingDocument', props.data.type)
    }

    function handleSignImgClear() {
      state.sign = ''
    }

    function initData() {
      if (props.data.jsonText && props.data.jsonText !== '{}') {
        const jsonText = JSON.parse(props.data.jsonText)
        state.pageData = Object.assign(cloneDeep(baseData), jsonText)
      } else {
        nextTick(() => {
          state.pageData = cloneDeep(baseData)
        })
      }
    }

    watch(
      user,
      val => {
        if (val) {
          queryUserSignByName([val.name], 'nursingDocument', props.data.type)
          state.sign = val.name
        }
      },
      {
        immediate: true
      }
    )

    onMounted(() => {
      initData()
    })

    return {
      ...toRefs(state),
      signPhoto,
      handleSignInputBlur,
      handleSignImgClear
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';
@import '@/views/doc/styles/doc-fix.scss';
$border: 1px solid #000;

.docMain {
  line-height: 2em;
  margin-top: 10px;

  input {
    appearance: none;
    border: none;
    outline: none;
    border-bottom: 1px solid #000;
  }

  .checkBoxItem {
    display: flex;
    align-items: center;
  }

  .checkBox {
    width: 14px;
    height: 14px;
    margin-right: 5px;
    border: 1px solid #000;
  }
}

.textIndent2 {
  text-indent: 2em;
}

.flexBox {
  display: flex;
  margin-top: 40px;

  .item {
    width: 50%;
    display: flex;
    align-items: center;
  }
}

.title2 {
  text-align: center;
  font-size: 16px;
  margin-bottom: 10px;
  margin-top: 20px;
}

::v-deep {
  .el-input .el-input__inner {
    border: none;
    border-radius: 0;
    text-align: left;
    padding: 0 4px;
    color: #000;
  }
}
</style>
